<template>
  <div  class="loginPage">
    <!-- <div align="center"> -->
    <!-- 中间内容开始	 -->
    <div class="obpmBid">
      <div class="obpm-tou">
        <div class="obpm-xiajiangtou">
          <!-- url(../assets/images/background.gif -->
          <img src="../assets/images/xiala.jpg" class="xiala" />
        </div>
        <font class="obpm-Language">语言:</font>
        <select name="language" class="obpm-selectLang" v-model="language" @change="changeLanguage">
          <option value="en">English</option> 
          <option value="zh">简体中文</option>
          <option value="cn">繁體中文</option>
        </select>
      </div>
    </div>
    <div class="loginContent">
      <div class="loginmain" >
        <div class="loginLogo">
          <img src="../assets/images/LOGO.png" alt="Teemlink.com" />
        </div>
        <div class="obpm-logoIpt">
          <div class="obpm-moon"></div>
          <div v-bind:class="{'obpm-userInfoFist':true,'obpm-userInfoFist2':have}">
            <div class="obpm-ueserico">
              <img src="../assets/images/icon_01.png" />
            </div>
            <div>
              <input
                type="text"
                class="obpm-userInfo_input"
                :placeholder="$t('loginno')"
                v-model="username"
              />
            </div>
          </div>
          <div v-bind:class="{'obpm-userPwdFist':true,'obpm-userPwdFist2':have}">
            <div class="obpm-ueserico">
              <img src="../assets/images/icon_02.png" />
            </div>
            <div>
              <input
                onfocus="this.value='';"
                type="password"
                class="obpm-password_input"
                :placeholder="$t('password')"
                autocomplete="off"
                v-model="password"
                @keyup.enter="doLogin"
              />
            </div>
          </div>
          <div v-bind:class="{'obpm-proof':true,'obpm-userPwdFist2':have,'hide':!have}" >
            <div v-bind:class="{'obpm-proofCode':true,'obpm-proof2':have}">
              <div class="obpm-ueserico">
                <img src="../assets/images/proof.png" />
              </div>
              <div>
                <input
                  onfocus="this.value='';"
                  type="text"
                  class="obpm-code_input"
                  :placeholder="$t('character')"
                  autocomplete="off"
                  v-model="checkcode"
                  @keyup.enter="doLogin"
                />
              </div>
            </div>
            <div class="obpm-proofImg">
              <img :src="checkcodeImg" align="absmiddle" @click="doLogin('changeImg')" id="checkCodeImg">
            </div>
          </div>
          <!-- Show the Errors -->
          <div v-bind:class="{'obpm-errorMessage':true,'hide':!have}">
            <div class="obpm-tipWord">
              <img class="obpm-tipImg" src="../assets/images/tip1.png">
              <b>{{$t('error')}}:</b><span>{{errmsg}}<br></span>
            </div>
          </div>
          <!-- <div id="tipsArea" class="obpm-tipsArea"></div> -->
          <div v-bind:class="{'obpm-loginIn':true,'obpm-loginIn2':have}" @click="doLogin">
            <p>{{$t('login')}}</p>
          </div>
        </div>
      </div>
      <p id="copyright" class="obpm-copy">
        © 2009-2019.
        <a href="http://www.teemlink.com" target="_blank" title="广东天翎" class="copyrightA">
          <b>Teemlink.com</b>
        </a> {{$t('reserved')}}
      </p>
    </div>
    <!-- 中间内容结束 -->
    <!-- </div> -->
  </div>
</template>

<script>
import {setCookie} from '../utils'
export default {
  data() {
    return {
      username: "",
      password: "",
      have:false,
      checkcode:"",
      errmsg:"",
      checkcodeImg:"",
      language: 'zh'
    };
  },
  methods: {
    doLogin(type="default") {
      let checkcode=""
      if(type=="changeImg"){
        checkcode="1111";
      }else{
        checkcode=this.checkcode;
      }
      let password;
      password=this.processPassword(this.password);
      this.$api.login(this.username, password,checkcode,{
        onSucess: response => {
          if (response.data.code == "0") {
            this.$api.getCurrentUser({
              onSucess: response => {

                //this.$store.commit("saveCurrentUser",response.data.data);
                // 保存多语言
                setCookie('domainLanguage', this.language, 1)
                if(response.data.data && response.data.data.isOpenSecurity){
                  //开关开启
                  if(response.data.data.departments.length>0){
                    this.$router.push("/main");
                  }else{
                    this.$router.push("/home");
                  }
                }else{
                  this.$router.push("/home");
                }
              }
            });

          }else{
            if(response.data.checkcodeImg && response.data.checkcodeImg!=""){
              this.checkcodeImg=response.data.checkcodeImg
              this.have=true;
            }else{
              this.have=false;
            }
            this.errmsg=response.data.msg;
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: "error"
            });
          }
        }
      });
    },
    processPassword(pw){
      let Base64 = require('js-base64').Base64;
      var str = Base64.encode(pw);
      if(str.length>2){
        var lp = str.substr(0,2);
        var rp = str.substr(2,str.length);
        pw = rp+lp;
      }
      return pw;
    },
    // 处理多语言
    changeLanguage(){
      this.$i18n.locale = this.language
    }
  }
};
</script>

<style lang="scss" scoped>

</style>